<template>
  <div>
    首页 
    <!-- <a-button type="primary" @click="handleChangeName">修改nickname {{ nickname }}</a-button> -->
    <a-button type="primary" @click="handleClick">修改str {{ str }}</a-button>
    <!-- <Tutorial/> -->
    <br/>
    <nuxt-link to="/list">link跳转到list</nuxt-link>
    <nuxt-link :to="{name: 'list', query: {id: 1}, params: {id: 2}}">link传参跳转到list</nuxt-link>
    <br/>
    <a href="/list?id=1">a链接的形式（不推荐，a链接刷新页面，nuxt-link不刷新页面）</a>
    <br/>
    <a-button @click="handleLink">js跳转</a-button>

    <br/>
    <nuxt-link to="/search">link跳转到search</nuxt-link>

    <br/>
    <br/>
    <br/>
    <br/>

    <nuxt-link to="/news">新闻页</nuxt-link>
    <nuxt-link to="/about">关于我们</nuxt-link>
    <nuxt-link to="/list">列表</nuxt-link>
    <nuxt-link to="/mine/order">我的订单</nuxt-link>
    <nuxt-link to="/login">登录</nuxt-link>

    <hr>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.imageName }}</li>
    </ul>
    <hr>
    <News />
  </div>
</template>

<script>
// import { mapState, mapMutations } from 'vuex'
export default {
  name: 'IndexPage',
  data() {
    return {
      str: '123',
      list: [],
      items: []
    }
  },
  // computed: {
  //   ...mapState({
  //     nickname: state => state.user.nickname
  //   })
  // },
  methods: {
    // ...mapMutations({ changeName: 'user/changeName' }),
    // handleChangeName() {
    //   // this.$store.commit('user/changeName', '改变昵称')
    //   this.changeName('改变昵称')
    // },
    handleLink() {
      // this.$router.push('/list')
      // this.$router.push({
      //   path: '/list',
      //   query: {id: 1}
      // })
      this.$router.push({
        name: 'list',
        params: {id: 2} // 编程式导航：`params` 不能与 `path` 一起使用
      })
    },
    handleClick() {
      this.str = '456'
    }
  },
  middleware: 'auth',
  // middleware() { } 
  validate({ params, query }) {
    console.log('validate')
    // return /^\d+$/.test(query.id)
    return true
  },
  async asyncData({ $axios, store, params }) {
    console.log('asyncData')
    let res = await $axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders')
    let list = res.data.data.list
    // this.list = list // error this 获取不到
    return { list }
  },
  async fetch({ $axios, app, store, params }) {
    console.log('fetch')
    // let res = await $axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders')
    // let list = res.data.data.list
    // this.items = list // 这么写 虽然可以获取到 this，但是，数据不能在页面中展示出来
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>
